<template>
  <div class="attendance" ref="attendance">
    <div class="a-text">
      <p>奋斗的时光，你我一路同行</p>
      <p v-if="props.stats?.yearMostEarlyAttendaceTime !== '无'" class="a-data">
        {{ props.stats?.yearMostEarlyAttendaceTime }}
      </p>
      <p v-if="props.stats?.yearMostEarlyAttendaceTime !== '无'">
        你今年的第一次移动打卡，开启你的星海航程
      </p>
      <br />
      <p class="a-data">{{ props.stats?.specialAttendanceLocation }}</p>
      <p>
        一个特别的地方，你的足迹留下<span>{{
          props.stats?.specialAttendanceQuantity
        }}</span>次
      </p>
      <p v-if="props.stats?.yearMostEarlyAttendaceTime === '无'">
        在此开启你的星海航程
      </p>
      <p v-if="props.stats?.yearMostEarlyAttendaceTime === '无'">
        梦与光，一直陪伴着你
      </p>
    </div>
    <img class="a-trail" src="@/assets/img/attendance/bg-trail.png" alt="" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { slideUp, slideDown } from "@/utils/slide";
import { changeStatusBarColor } from "@/cordova/common";

const props = defineProps<{
  stats: any;
}>();

const emit = defineEmits(["slideUp", "slideDown"]);

onMounted(() => {
  slideUp(attendance.value, () => {
    console.log("hello");
    emit("slideUp");
  });
  slideDown(attendance.value, () => {
    emit("slideDown");
  });
  changeStatusBarColor([68, 168, 252, 1]);
});

const attendance = ref(null);
</script>

<script lang="ts">
export default {
  name: "AttendancePage",
};
</script>

<style lang="scss" scoped>
.attendance {
  @include full-screen-relative;
}

.a-text {
  @include animation-fade-in(2s);
  position: absolute;
  top: 184px;
  left: 63px;
  font-size: 30px;
  font-family: ChangAnunitype;
  font-weight: 400;
  color: #ffffff;

  p {
    margin-bottom: 30px;
  }

  .a-data {
    font-size: 48px;
  }

  span {
    font-size: 48px;
  }
}

.a-trail {
  @include animation-move-up;
  position: fixed;
  bottom: -20px;
  height: 531px;
  width: 750px;
}</style>
